<template>
	<view class="">


		<view class="titlesName">重置密码</view>

		<view class="userDetails">

			<view class="Items">
				<text class="titles">手机号码</text>
				<view class="inputDiv">
					<input class="inputClass" @blur="showTapImg" type="number" v-model="phone" />
				</view>
			</view>
			
			<view class="Items m-t20">
				<text class="titles">图验证码</text>
				<view class="inputDiv" style="border:none;">
					<view class="inputClass_1">
						<input class="inputClass inputYzm" v-model="imgCode" />
					</view>
					<view v-if="!yzmCodeImg" class="yzmTime" @tap="showTapImg">获取验证码</view>
					<image v-else class="yzmCode" :src="yzmCodeImg" @tap="showTapImg" mode=""></image>
				</view>
			</view>


			<view class="Items m-t20">
				<text class="titles">验证码</text>
				<view class="inputDiv" style="border:none;">
					<view class="inputClass_1">
						<input class="inputClass inputYzm" v-model="phoneCode" />
					</view>
					<view v-if="time==0" class="yzmTime" @tap="djsTap">获取验证码</view>
					<view v-else class="yzmTime" style="color:#C0C0C0;">倒计时{{time}}秒</view>
				</view>
			</view>
			
			<view class="Items m-t20">
				<text class="titles">新密码</text>
				<view class="inputDiv">
					<input class="inputClass" placeholder="6-10位非纯数字" type="text" @blur="isNumberOr_Letter(newParssword)" v-model="newParssword" />
				</view>
			</view>
			
			
			<view class="btns" hover-class="btnshover" @tap="userAddPaSSWORD">确认重置密码</view>


		</view>

	</view>
</template>

<script>
	import {sendForgetPwdCode,resetPwd} from '@/common/api/table.js'
	export default {
		data() {
			return {
				phone: '',
				phoneCode: '',
				djsTime: 60,
				time: 0,
				newParssword:'',
				imgCode:'',
				yzmCodeImg:'',
				timeOut:''
			}
		},
		methods: {
			//密码6-10位，且非纯数字验证
			isNumberOr_Letter(s){
				var regu = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$"; 
				var re = new RegExp(regu);
				if (re.test(s)) { 
					return true;
				}else{ 
				    uni.showToast({
				    	icon:'none',
						title:'密码格式不对'
				    })
					return false; 
				}
			},
			
			userAddPaSSWORD(){
				 //手机号非空以及规则
				 if (this.phone) {
				 	//验证手机号
				 	var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				 	if (!myreg.test(this.phone)) {
				 		uni.showToast({
				 			title: '输入手机号不正确',
				 			icon: 'none'
				 		})
				 		return;
				 	}
				 } else {
				 	uni.showToast({
				 		title: '请先输入手机号',
				 		icon: 'none'
				 	});
					return;
				 };
				 
				 //短信验证码非空
				 if(!this.phoneCode){
				 	uni.showToast({
				 		title: '请输入短信验证码',
				 		icon: 'none'
				 	})
				 	return;
				 };
				
			 let type = this.isNumberOr_Letter(this.newParssword);
			 if(type==false) return;
			 
			 let obj = {
				 userPhone:this.phone,
				 password:this.newParssword,
				 vCode:this.phoneCode
			 }
			 resetPwd(obj)
			 .then(res=>{
				 if(res.code==200){
					 uni.showToast({
					 	icon:'none',
						title:'重置密码成功'
					 });
					 setTimeout(()=>{
						 let objte = {
						 	phone: this.phone,
						 	password: this.newParssword
						 };
						 uni.navigateTo({url:`user-dl?userObj=${JSON.stringify(objte)}`});
					 },1500)
				 }
			 })	 
				 
			},
			
			
			showTapImg() {
				let apiurl = uni.getStorageSync('serverUrl');
				if (this.phone) {
					//验证手机号
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(this.phone)) {
						uni.showToast({
							title: '输入手机号不正确',
							icon: 'none'
						})
						return;
					} else {
						this.yzmCodeImg = '';
						let timestamp = Date.parse(new Date());
						this.yzmCodeImg =
							`${apiurl}/verifyCode/forgetPwdImageCode?timestamp=${timestamp}&userPhone=${this.phone}`;
					}
				} else {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
				}
			},

			//手机验证码
			djsTap() {
				if(!this.imgCode){
					uni.showToast({
						title: '请输入图形验证码',
						icon: 'none'
					})
					return;
				};
				
				if (this.phone) {
					//验证手机号
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(this.phone)) {
						uni.showToast({
							title: '输入手机号不正确',
							icon: 'none'
						})
						return;
					} else {
						//发送请求获取短信验证码
						let obj = {
							imgCode: this.imgCode,
							userPhone: this.phone
						};
						sendForgetPwdCode(obj)
							.then(res => {
								if (res.code == 200) {
									this.timeOut = setInterval(() => {
										this.time = this.djsTime--;
										if (this.time == 1) {
											this.time = 0;
											this.djsTime = 60;
											clearInterval(this.timeOut);
										}
									}, 1000);
								}
							})
					}
				} else {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.titlesName {
		width: 100%;
		text-align: center;
		color: black;
		font-size: 45rpx;
		margin-top: 30rpx;
	}

	.userDetails {
		width: 690rpx;
		border-radius: 15rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 30rpx 0;
		margin: 0 auto;
		margin-top: 50rpx;
		background-color: white;

		.Items {
			width: 690rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;

			.titles:before {
				content: '* ';
				color: red;
			}

			.titles {
				font-size: 25rpx;
				width: 120rpx;
				text-align: end;
			}

			.inputDiv {
				width: 430rpx;
				height: 60rpx;
				margin-left: 20rpx;
				border: 1rpx solid #C0C0C0;
				border-radius: 15rpx;
				display: flex;
				align-items: center;

				.inputClass {
					width: 400rpx;
					height: 60rpx;
					margin-left: 20rpx;
					margin-top: 0;
					border: 0;
				}

				.inputYzm {
					width: 230rpx !important;
				}

				.yzmTime {
					font-size: 25rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.m-t20 {
		margin-top: 35rpx;
	}
	.inputClass_1 {
		width: 250rpx;
		height: 60rpx;
		border: 1rpx solid #C0C0C0;
		box-sizing: border-box;
		border-radius: 15rpx;
	}
	.btns {
		width: 550rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: white;
		background-color: #003bfe;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	
	.btnshover {
		background-color: #1980fe;
	}
	.yzmCode {
		width: 150rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
</style>
